<template>
	<view class="f-f-c">
		<u-navbar
		:autoBack="true" bgColor="#fff"
		leftIconColor='#000'
		:titleStyle="{ color: '#000'}"
		 title="称重" rightText='' :border="false" :placeholder="true">
			<!-- <view slot="left"></view> -->
			<!-- <view slot="right" style="display: flex;">
				<u-icon name="clock" color="#fff" size="16" style="margin: 0 5px;"></u-icon>
				<u-icon name="plus-circle" color="#fff" size="16"></u-icon>
			</view> -->
		</u-navbar>
		<view class="mt20 p20 b-s">
			<view class="c3 f-s-b">
				<span>种类</span>
				<span>单价</span>
				<span>重量</span>
				<span>金额</span>
			</view>
			<view class="f-s-b c6 mt20 pt20 b-t" v-for="item,ix in 10" :key="ix">
				<span>箱纸板</span>
				<span>1.2元/kg</span>
				<span>10kg</span>
				<span>12元</span>
			</view>
		</view>
		<view class="sureBtn" @click="show = true">
			添加
		</view>
		<u-popup :show="show":round="4" mode="center"  @close="close" @open="open">
			<view style="" class="f-f-c p20">
				<view class="f-s-b" >
					<span></span>
					<span>添加</span>
					<u-icon @click="close" name="close" color="#333" size="16"></u-icon>
				</view>
				<view class="">
					<view class="f-s-b pt20 pb20">
						<span class="mr20 c3 f28" style="width: 60rpx;;white-space: nowrap;">种类</span>
						<view class="m10 inputbox f">
							<input type="text" placeholder="请输入" />
							<u-icon name="arrow-down" color="#ccc" size="16"></u-icon>
						</view>
					</view>
					<view class="f-s-b pt20 pb20">
						<span class="mr20 c3 f28" style="width: 60rpx;;white-space: nowrap;">单价</span>
						<view class="m10 inputbox f ">
							<input type="text" placeholder="请输入" />
							<span class="c9 f24">元/kg</span>
						</view>
					</view>
					<view class="f-s-b pt20 pb20">
						<span class="mr20 c3 f28" style="width: 60rpx;;white-space: nowrap;">重量</span>
						<view class="m10 inputbox f">
							<input type="text" placeholder="请输入" />
							<span class="c9 f24" >kg</span>
						</view>
					</view>
					<view class="f-f-c-c p20">
						<view class="btn mb20"> 自动输入</view>
						<view class="btn2"> 手动输入</view>
					</view>
				</view>
			</view>
		</u-popup>
		
		
	</view>
</template>


<script>
	export default {
		data() {
			return {
				list1:[],
				high:0,
				show:false,
			}
		},
		onReachBottom() {
			
		},
		onReady() {
			
		},
		onLoad(){
			
		},
		onShow() {
			
		},
		methods: {
			open() {
				// console.log('open');
			  },
			  close() {
				this.show = false
				// console.log('close');
			  },
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		min-height: 50%;
		background-color: #f8f8f8;
	}

	.btn{
		width: 100%;
		height: 68rpx;
		background: #1AC388;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color:#fff;
	}
	.btn2{
		width: 100%;
		height: 68rpx;
		background: rgba(26,195,136,0);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		opacity: 1;
		border: 2rpx solid var(--theme);
		text-align: center;
		line-height: 68rpx;
		color: var(--theme);
	}
	
</style>
